<template>
    <div class="funnel_card">
        <a-card :title="'步骤 ' + ( item + 1 )" size="small">
            <a v-show="item !== 0" slot="extra" href="javascript:;" @click="$emit('reduceItem', item)">删除</a>
            <a-form-model
                ref="ruleForm"
                :model="form"
                :rules="rules"
                :label-col="{ span: 4 }"
                :wrapper-col="{ span: 18 }"
            >
            <a-form-model-item label="步骤字段" prop="itemName">
                <a-select v-model="form.itemName" placeholder="请选择">
                    <a-select-option v-for="(item, index) in step_field" :key="index" :value="item.name">
                        {{ item.displayName }}
                    </a-select-option>
                </a-select>
            </a-form-model-item>
            </a-form-model>
        </a-card>
    </div>
</template>

<script>
import { mapState } from 'vuex'
    export default {
        props: {
            funnelForm: Object,
            dataMapping: Object,
            item: Number
        },
        data () {
            return {
                form: {},
                rules:{
                    itemName: [
                        { required: true, message: '请选择步骤字段', trigger: 'change' }
                    ]
                }
            }
        },
        watch: {
            form: {
                handler(val) {
                    let currentVal = { step: this.item + 1,...val }
                    this.step_field.forEach(item => {
                        if (item.name == currentVal.itemName) {
                            currentVal.name = item.displayName;
                        }
                    })
                    this.$set(this.dataMapping.steps, this.item, currentVal);
                },
                deep: true
            }
        },
        computed: {
            ...mapState('custom', ['DsList']),
            step_field () {
                let current_dataset = this.DsList.filter(item => {
                    if (item.id == this.dataMapping.datasetId) return item
                })
                if (this.dataMapping.datasetId) {
                    let output = JSON.parse(current_dataset[0].output);
                    return output
                } else {
                    return []
                }
            }
        },
        mounted () {
            this.form = { ...this.dataMapping.steps[this.item] }
        },
        methods: {
            onFunnelSubmit () {
                let abb = null;
                this.$refs.ruleForm.validate(valid => {
                    abb = valid
                })
                return abb
            }
        }
    }
</script>

<style scoped>
.funnel_card {
    margin-bottom: 12px;;
}
</style>